<template>
    <div id="Ucenter-index">
        <div class="content">
            <div class="head-box">
                <div class="user-info-box">
                    <div class="user-info-left">

                    </div>
                    <div class="user-info-center">
                        <div class="user-avatar">
                            <div class="avatar">
                                <img src="http://dmp2016.chenhow.com/uploads/pTdhjDN6h2.jpg" alt="">
                            </div>
                        </div>
                        <div class="user-name">
                            <span class="no-login">登陆/注册</span>
                        </div>
                    </div>
                    <div class="user-info-right">
                        <div class="img-box">

                        </div>
                    </div>
                </div>
            </div>
            <div class="favorable-box">
                <div class="wallet favorable-item vmc-1px-right">
                    <div>余额</div>
                </div>
                <div class="red-packet favorable-item vmc-1px-right">
                    <div>美团红包</div>
                </div>
                <div class="coupon favorable-item">
                    <div>商家代金券</div>
                </div>
            </div>
            <div class="row-box">
                <div class="row vmc-1px-bottom info">
                    我的评价
                    <i class="icono-caretRight"></i>
                </div>
                <div class="row vmc-1px-bottom user">
                    我的好友
                    <i class="icono-caretRight"></i>
                </div>
                <div class="row vmc-1px-bottom collect">
                    我的收藏
                    <i class="icono-caretRight"></i>
                </div>
                <div class="row vmc-1px-bottom address">
                    我的地址
                    <i class="icono-caretRight"></i>
                </div>
                <div class="row vmc-1px-bottom wallet">
                    我的钱包
                    <i class="icono-caretRight"></i>
                </div>
            </div>
            <div class="service-box">
                <div class="service-phone">
                    客服电话 ：10109777
                </div>
                <div class="service-time">
                    服务时间 ：9:00 - 23:00
                </div>
            </div>
        </div>
        <tabbar :index="index" :items="items" :show="showTab" back-color="#FCFCFC" color="#B2B2B2"></tabbar>
    </div>
</template>

<script type="text/ecmascript-6">
    import { Tabbar } from 'vmc';

    export default {
        name: '',
        components: {
            Tabbar
        },
        methods: {
            jump(page) {
                this.$router.forward({ name: page });
            }
        },
        data() {
            return {
                direction: 'forward',
                showTab: true,
                index: 2,
                items: [
                    {
                        icon: `<i style="transform: scale(0.94);" class="icono-home"></i>`,
                        text: '首页',
                        callback: () => this.$router.go('/store/index')
                    },
                    {
                        icon: `<i style="transform: scale(0.94);" class="icono-exclamationCircle"></i>`,
                        text: '订单',
                        callback: () => this.$router.go('/order/index')
                    },
                    {
                        icon: `<i style="transform: scale(0.94);" class="icono-exclamationCircle"></i>`,
                        text: '我的',
                        callback: () => this.$router.go('/Ucenter')
                    }
                ]
            }
        },
        vuex: {
            actions: {

            },
            getters: {

            }
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    #Ucenter-index{
        .content{
            width: 100%;
            height: 100%;
            overflow: auto;
            box-sizing: border-box;
            padding-bottom: 55px;
            .head-box{
                height: 155px;
                background: #FFD557;

                .user-info-box{
                    display: flex;
                    height: 100%;
                    width: 100%;
                    .user-info-left{
                        width: 50px;
                    }
                    .user-info-center{
                        flex: 1;
                        text-align: center;
                        overflow: hidden;
                        padding-top: 23px;

                        .user-avatar{
                            position: relative;
                            width: 100px;
                            margin: 0 auto;

                            .avatar{
                                background-color: #ffffff;
                                width: 60px;
                                height: 60px;
                                border: 4px #FFE69A solid;
                                border-radius: 50%;
                                padding: 2px;
                                display: inline-block;
                                
                                
                                
                                img{
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                }
                            }
                        }

                        .user-name{
                            margin-top: 18px;
                        }
                    }
                    .user-info-right{
                        width: 50px;
                        height: 50px;

                        .img-box{
                            position: relative;
                            display: inline-block;
                            width: 21px;
                            height: 21px;
                            margin: 15px;
                            background: url("/static/img/set.png") no-repeat;
                            background-size: cover;
                        }
                    }
                }
            }
            .favorable-box{
                display: flex;
                background: #ffffff;
                padding: 11px 0;
                .favorable-item{
                    flex: 1;
                    text-align: center;
                    padding-top: 50px;
                }
                .wallet{
                    background: url("/static/img/index-wallet.png") no-repeat center top 15px;
                    background-size: 35px;
                }
                .red-packet{
                    background: url("/static/img/index-red-packet.png") no-repeat center top 15px;
                    background-size: 35px;
                }
                .coupon{
                    background: url("/static/img/index-coupon.png") no-repeat center top 15px;
                    background-size: 35px;
                }
            }
            .row-box{
                background: #ffffff;
                margin-top: 10px;
                .row{
                    padding: 13px 16px 13px 45px;
                    color: #666666;

                    i{
                        float: right;
                        margin: 0;
                        transform: scale(0.7);
                        color: #AFAFAF;
                    }
                    &.info{
                        background: url('/static/img/index-info.png') no-repeat center left 16px;
                        background-size: 20px;
                    }
                    &.user{
                        background: url('/static/img/index-user.png') no-repeat center left 16px;
                        background-size: 20px;
                    }
                    &.collect{
                        background: url('/static/img/index-fow.png') no-repeat center left 16px;
                        background-size: 20px;
                    }
                    &.address{
                        background: url('/static/img/index-address.png') no-repeat center left 16px;
                        background-size: 20px;
                    }
                    &.wallet{
                        background: url('/static/img/index-wallet-g.png') no-repeat center left 16px;
                        background-size: 20px;
                    }
                }
            }
            .service-box{
                margin-top: 10px;

                .service-phone{
                    padding: 13px 0;
                    text-align: center;
                    color: #FFB000;
                    background: #ffffff;
                }
                .service-time{
                    padding: 13px 0;
                    text-align: center;
                }
            }
        }
    }
</style>